<template>
  <div>
    <el-tabs v-model="active">
      <el-tab-pane label="组件属性" name="first">
        <el-row type="flex" align="middle">
          <el-col :span="6">
            <div class="prop-set-title">字段标识</div>
          </el-col>
          <el-col :span="18">
            <select-model :model.sync="store.current.model"></select-model>
          </el-col>
        </el-row>

        <el-row type="flex" align="middle">
          <el-col :span="6">
            <div class="prop-set-title">标题</div>
          </el-col>
          <el-col :span="18">
            <el-input
              v-model="store.current.options.title"
              placeholder="title"
            ></el-input>
          </el-col>
        </el-row>

        <el-row type="flex" align="middle">
          <el-col :span="6">
            <div class="prop-set-title">矩阵模式</div>
          </el-col>
          <el-col :span="18">
            <el-input
              v-model="store.current.options.col"
              placeholder="title"
            ></el-input>
          </el-col>
        </el-row>

        <el-row type="flex" align="middle">
          <el-col :span="6">
            <div class="prop-set-title">矩阵模式</div>
          </el-col>
          <el-col :span="18">
            <el-radio-group v-model="store.current.options.direction">
              <el-radio label="horizontal">横向</el-radio>
              <el-radio label="vertical">纵向</el-radio>
            </el-radio-group>
          </el-col>
        </el-row>

        <el-row type="flex" align="middle">
          <el-col :span="24">
            <div class="prop-set-title">显示属性</div>
          </el-col>
        </el-row>

        <el-row type="flex" align="middle">
          <el-col :span="24">
            <div class="prop-set-title">
              <el-switch
                active-text="是否显示冒号"
                v-model="store.current.options.colon"
              ></el-switch>
              <el-switch
                active-text="是否有边框"
                v-model="store.current.options.border"
              ></el-switch>
            </div>
          </el-col>
        </el-row>

        <el-row type="flex" align="middle">
          <el-col :span="6">
            <div class="prop-set-title">数据管理</div>
          </el-col>
          <el-col :span="18">
            <i
              @click="addDesc"
              class="el-icon-circle-plus-outline addDescriptions"
            ></i>
          </el-col>
        </el-row>

        <div class="descriptions-data-wrap">
          <el-row
            type="flex"
            align="middle"
            :gutter="8"
            v-for="(desc, index) in store.current.options.data"
            :key="index"
          >
            <el-col :span="10">
              <el-input v-model="desc.label" placeholder="title"></el-input>
            </el-col>
            <el-col :span="10">
              <el-input v-model="desc.value" placeholder="title"></el-input>
            </el-col>
            <el-col :span="4">
              <i
                @click="removeDesc(store.current.options.data, index)"
                class="el-icon-delete"
              ></i>
            </el-col>
          </el-row>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import clone from "clone";
export default {
  inject: ["getStore"],
  data() {
    return {
      active: "first",
    };
  },
  watch: {
    "store.current.options": {
      handler() {
        //特别注意，不能用箭头函数，箭头函数，this指向全局
        this.$handleStack.push(clone(this.store.root));
      },
      // immediate: true,  //刷新加载 立马触发一次handler
      deep: true, // 可以深度检测到 obj 对象的属性值的变化
    },
  },
  methods: {
    addDesc() {
      this.store.current.options.data.push({
        label: "label",
        value: "value",
        type: "",
      });
    },
    removeDesc(data, index) {
      this.$delete(data, index);
    },
  },
  computed: {
    store() {
      return this.getStore();
    },
  },
};
</script>

<style  scoped>
>>> .m-colorPicker .box {
  position: fixed !important;
}
>>> .el-tabs__nav {
  text-align: center;
}

>>> .el-descriptions {
  margin: 10px 15px;
}
.descriptions-data-wrap {
  padding: 5px 8px;
}
.addDescriptions {
  cursor: pointer;
}
.el-icon-delete {
  color: red;
  cursor: pointer;
}
</style>